<template>
  <div class="app-container">
    <el-form label-width="88px">
      <el-form-item label="挂号单ID">
        <el-input v-model="regId" clearable size="small" style="width:300px" />
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
        <el-button type="primary" icon="el-icon-search" size="mini" @click>读取ic卡</el-button>
      </el-form-item>
    </el-form>
    <el-card style="margin-bottom:8px" v-if="careHistory != undefined">
      <el-form label-position="left" label-width="120px" inline class="demo-table-expand">
        <el-form-item label="挂号单号 :">
          <span v-text="careHistory.regId"></span>
        </el-form-item>
        <el-form-item label="医生姓名 :">
          <span v-text="careHistory.userName"></span>
        </el-form-item>
        <el-form-item label="科室名称 :">
          <span v-text="careHistory.deptName"></span>
        </el-form-item>
        <el-form-item label="患者姓名 :">
          <span v-text="careHistory.patientName"></span>
        </el-form-item>
        <el-form-item label="就诊时间 :">
          <span v-text="careHistory.careTime"></span>
        </el-form-item>
        <el-form-item label="主诉:">
          <span v-text="careHistory.caseTitle"></span>
        </el-form-item>
        <el-form-item label="诊断信息 :">
          <span v-text="careHistory.caseResult"></span>
        </el-form-item>
        <el-form-item label="医生建议 :">
          <span v-text="careHistory.doctorTips"></span>
        </el-form-item>
      </el-form>
    </el-card>

    <!--按钮的显示-->
    <el-card style="margin-bottom:8px" v-if="careOrders.length > 0">
      <el-button type="success" @click="handleSelectAll">全选</el-button>
      <el-button type="primary" @click="handleCancelAll">取消全选</el-button>
      <el-button type="danger" @click="handlePayWithXJ">现金</el-button>
      <el-button type="danger" @click="handlePayWithZFB">支付宝</el-button>订单总额 :
      <span style="color:red">¥: {{allAmounts}}</span>
    </el-card>

    <!-- 表格的显示 -->
    <el-card style="margin-bottom:8px">
      <!-- 折叠框 -->
      <el-collapse v-model="activeName" v-if="careOrders.length > 0">
        <el-collapse-item v-for="(item,index) in careOrders" :key="index">
          <template
            slot="title"
          >[{{item.coType==0?'药用处方':'检查处方'}}] [{{index+1}}] [处方总额] {{item.allAmount}}</template>
          <!-- 显示表格数据 -->
          <el-table
            :data="item.careOrderItems"
            ref="refTable"
            @selection-change="handleSelectionChange($event, item.coId)"
          >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="序号" align="center" type="index" />
            <el-table-column :label="item.coType==0?"药品名称":"项目名称"" align="center" prop="itemName" />
            <el-table-column label="数量" align="center" prop="num" />
            <el-table-column label="单价(元)" align="center" prop="price" />
            <el-table-column label="金额(元)" align="center" prop="amount" />
            <el-table-column label="服用备注" align="center" prop="remark" />
            <el-table-column label="状态" align="center" prop="status" :formatter="statusFormat" />
          </el-table>
        </el-collapse-item>
      </el-collapse>
    </el-card>
  </div>
</template>
<script>
import { payWithZFB,regOrder } from "@/api/order/charge";

export default {
  name: "Order",
  data() {
    return {
      // 遮罩层
       loading: true,
      //用户输入的挂号单id
      regId: undefined,
      //病例对象
      careHistory: undefined,
      careOrders: [],
      // 状态数据字典
      statusOptions: [],
      //订单总额
      allAmounts: undefined,
      activeName: "",
      //当前选中的所有项目集合
      selectItems: []
    };
  },
  created() {
    this.getDicts("his_order_details_status").then(response => {
      this.statusOptions = response.data;
    });
  },
  methods: {
    handleQuery() {
      if (this.regId == "") {
        this.$message.error("请输入挂号单号");
        return;
      }
      this.careHistory = undefined;
      this.careOrders = [];
      regOrder(this.regId).then(res => {
        console.log(res.data);
        if (res.data.careHistory != null) {
          this.careHistory = res.data.careHistory;
          this.careOrders = res.data.careOrders;
        }
      });
    },
    // 状态字典翻译
    statusFormat(row, column) {
      return this.selectDictLabel(this.statusOptions, row.status);
    },
    //全选
    handleSelectAll() {
      const tables = this.$refs.refTable;
      tables.filter(t => {
        t.clearSelection();
        t.toggleAllSelection();
      });
    },
    //取消全选
    handleCancelAll() {
      const tables = this.$refs.refTable;
      tables.filter(t => {
        t.clearSelection();
      });
    },

    // 多选框选中数据
    handleSelectionChange(selection, coId) {
    
      if(this.selectItems.length == 0){
          this.selectItems = selection
      }else{
        for(let i =0 ;i< this.selectItems.length ; i++){
            const selectItem = this.selectItems[i]
            if(selectItem.coId == coId){
              this.selectItems.splice(i,1)
              i--
            }
        }
         selection.filter(newItem =>{
        this.selectItems.push(newItem)
      })
      }
     
      console.log(this.selectItems)
      this.compAllamount()
    },
    //计算总额
    compAllamount(){
      this.allAmounts = 0;
      this.selectItems.filter(item => {
       this.allAmounts +=item.amount
      })
    },
    //现金支付
    handlePayWithXJ(){

    },
    //支付宝支付
    handlePayWithZFB(){
      
      const obj ={
            ordercharge:{
               orderAmount:this.allAmounts,
               chId :this.careHistory.chId,
               regId:this.careHistory.regId,
               patientName:this.careHistory.patientName
            },
           data : []
      }
      
 this.selectItems.filter(item => {
    if(this.allAmounts <= 0){
      this.$message.error("请选择支付的商品");
      return
    }
    
    const orderData={
       itemId : item.itemId,
       coId : item.coId,
       itemName : item.itemName,
       itemPrice : item.price,
       itemNum: item.num,
       itemType : item.itemType, 
       itemAmount:item.amount        
      }
      obj.data.push(orderData)    
        })
        console.log(obj.data)
        payWithZFB(obj)
    console.log(this.careHistory)
    //window.location.href='http://localhost:8080/alipay?orderAmount='+this.allAmounts
     
        
    }
    
  }
};
</script>
<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
